<template>
    <view v-if="goodsList.length" style="width: 100%;" class="flex_wrap_xb">
        <view class="flex_col goods_item" v-for="item in goodsList" :key="item.id" @tap="handleClickGoods(item)">
            <image class="goods_img" :src="shop_png" mode="widthFix">
            </image>
            <view class="flex_col goods_content">
                <view class="goods_title">
                    {{ item.name }}
                </view>
                <view class="goods_subtitle">
                    {{ item.subtitle }}
                </view>
                <view class="flex_xe">
                    <view class="goods_price">
                        <text class="price_unit">￥</text>
                        {{ item.price }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { apiGoodsList } from "@/api/goods";
import { onMounted } from "vue";
import shop_png from "/static/shop.jpeg"
import { onReachBottom } from '@dcloudio/uni-app';

const goodsList = ref([])
const loadStatus = ref('more')
const pagination = reactive({
    page: 1,
    size: 10,
    total: 0
})

const getList = async (init: boolean = false) => {
    const params = {
        publishStatus: 1,
        orderField: 'sort',
        orderSort: 'asc'
    }
    const res = await apiGoodsList(params, { page: pagination.page - 1, size: pagination.size })
    const { content, totalElements, totalPages } = res;
    goodsList.value = init ? content : goodsList.value.concat(content);
    pagination.total = totalElements;
    if (pagination.page < totalPages) {
        loadStatus.value = 'more'
    } else {
        loadStatus.value = 'noMore'
    }
}


const handleClickGoods = (item) => {
    uni.navigateTo({
        url: `/pages/goods/index?id=${item.id}`
    })
}
const loadmore = () => {
    if (loadStatus.value !== "noMore") {
        pagination.page++;
        getList();
    }
}

// 上拉加载更多
onReachBottom(() => {
    loadmore();
});

defineExpose({
    getList
})

onMounted(() => {
    getList()
})

</script>

<style scoped lang="scss">
.goods_item {
    width: 47%;
    margin-bottom: 12rpx;
    background: #fff;
    border-radius: 18rpx;
}

.goods_img {
    width: 100%;
    border-top-left-radius: 18rpx;
    border-top-right-radius: 18rpx;

}

.goods_content {
    padding: 20rpx;

    .goods_title {
        font-size: 26rpx;
        color: #333;
        width: 100%;
    }

    .goods_subtitle {
        font-size: 24rpx;
        color: #999999;
        margin-top: 14rpx;
    }

    .goods_price {
        font-size: 30rpx;
        color: red;
        line-height: 36rpx;
        margin-top: 16rpx;
        margin-right: 10rpx;
    }

    .price_unit {
        font-size: 24rpx;
        margin-right: -4rpx;
    }
}
</style>